<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-15 10:03:27
 * @LastEditors: 976901273@qq.com
 * @LastEditTime: 2023-07-27 17:09:35
 * @Description:
 *
-->

<template>
<div class="orchestrate-visualized-list-ctn">
  <ScreenContainer class="container">
    <ScreenHeader class="header">
      <div style="color:#60C8FF;margin-right:50px;font-size:18px">业务名称：{{name}}</div>
      <el-input
        v-model="searchKey"
        style="width: 200px; margin-right: 20px"
        size="medium"
        class="input"
        placeholder="请输入关键字进行过滤"
        clearable
      />
      <div class="botton" @click="getList()"></div>
      <!-- <el-button
        size="medium"
        type="primary"
        @click="queryClick"
      >查询</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button> -->
    </ScreenHeader>
    <ScreenMain class="main">
      <el-table
        class="common-table"
        :data="list"
        stripe
        :header-cell-style="{ height: '40px !important',color: '#60C8FF',background:'#1382C4 !important'}"
        :row-style="{background:'#00619A',color:'#FFFFFF'}"
        :cell-style="{height:'40px'}"
      >
        <el-table-column prop="name" label="业务名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="type" label="云资源类型" min-width="120" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" min-width="80"  show-overflow-tooltip >
          <template slot-scope="scope">
            <img style="width: 60px;height: 22px;position:relative;top:4px" v-if="scope.row.status=='已完成'" src="../../../../assets/imgs/orchestrate/completed.png">
            <img style="width: 72px;height: 22px;position:relative;top:4px" v-if="scope.row.status=='执行失败'" src="../../../../assets/imgs/orchestrate/failed.png">
            <img style="width: 60px;height: 22px;position:relative;top:4px" v-if="scope.row.status=='执行中'" src="../../../../assets/imgs/orchestrate/executing.png">
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="失败原因" min-width="100" />
        <el-table-column prop="createDate" label="创建时间" min-width="120" />
        <el-table-column prop="updateDate" label="更新时间" min-width="120" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <div class="detail" @click="jumpTo(scope.row.name,scope.row.type)">详情</div>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top: 30px">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="totalCount"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </ScreenMain>
  </ScreenContainer>
</div>
</template>

<script>
import pagePermissionMixin from '@/views/mixin/pagePermission.js'
import pageQueryMixin from '@/views/mixin/pageQuery.js'
import ScreenContainer from '@/components/Layout/ScreenContainer.vue'
import ScreenHeader from '@/components/Layout/ScreenHeader.vue'
import ScreenMain from '@/components/Layout/ScreenMain.vue'
import { detailOrchestrate } from '@/api/orchestrate'
export default {
  name: 'OrchestrateVisualizedList',
  components: {
    ScreenContainer,
    ScreenHeader,
    ScreenMain
  },
  mixins: [pagePermissionMixin, pageQueryMixin],
  data() {
    return {
      list:[],
      searchKey:"",
      name:'',
      pageNum:1,
      pageSize:10,
      totalCount:80,
    }
  },
  created() {},
  mounted() {
    //this.getList()
  },
  methods: {
    getList() {
      let id = this.$route.query.id
      this.name = this.$route.query.name
      let params = {
        id: id,
        keyword: this.searchKey,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      detailOrchestrate(params).then(res => {
        this.list = res.data.data// 返回数据在res.data中
        this.totalCount = res.data.totalCount
      })
    },
        /**
     * @description: 切换页码
     * @description: 获取列表
     * @return {*}
     */
    changepage(val) { // 切换页码时
      this.pageNum = val
      this.getList()
    },
    /**
     * @description: 改变页面容量
     * @description: 获取角色列表
     * @return {*}
     */
    sizeChange(val) { // 切换页码时
      this.pageSize = val
      this.getList()
    },
    jumpTo(name,type){
      let path = '/orchestrate/visualized/list'
      switch(type){
        case "私有云网络":
          path = '/cn-resource/network/private'
          break
        case "VPC网络":
          path = '/cn-resource/network/public'
          break
        case "虚拟机":
          path = '/cn-resource/vm'
          break
        case "子网":
          path = '/cn-resource/subnet'
          break
        case "云盘":
          path = '/cn-resource/storage/block'
          break
        case "弹性IP":
          path = '/cn-resource/elastic-ip'
          break
        case "浮动IP":
          path = '/cn-resource/float-ip'
          break
        case "安全组":
          path = '/cn-resource/nsg'
          break
        case "路由":
          path = '/cn-resource/route'
          break  
        default:
          //这里是没有找到对应的值处理
          break
      }
      this.$router.push({
        path: path,
        query: {
          keyword:name
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.orchestrate-visualized-list-ctn {
  .botton{
    display: inline-block;
    position: relative;
    top:3px;
    left:30px;
    cursor: pointer;
    width: 90px;
    height: 40px;
    background: url('../../../../assets/imgs/common/button.png')no-repeat;
    background-size:100% 100% ;
  }
  .detail{
    cursor: pointer;
    position: relative;
    top:1px;
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #32C0FE;
  }
  .line{
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #32C0FE;
  }
  .delete{
    cursor: pointer;
    position: relative;
    top:1.5px;
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #FF5691 ;
  }
}
</style>
